<template>
  <div class="tab-bar">
    <mt-tabbar v-model="selected" v-show="isShow" fixed class="border-1px-top">
      <mt-tab-item id="main">
        <img :src="image1" slot="icon">首页
      </mt-tab-item>
      <mt-tab-item id="activity">
        <img :src="image2" slot="icon">活动
      </mt-tab-item>
      <mt-tab-item id="mine">
        <img :src="image3" slot="icon">我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'main',
        image1: 'static/icon/main1.svg',
        image2: 'static/icon/activity1.svg',
        image3: 'static/icon/mine1.svg'
      }
    },
    computed: {
      isShow: () => {
        return true
      }
    },
    watch: {
      'selected': {
        handler() {
          if (this.selected == 'main') {
            this.$router.push('/main')
            this.image1 = "static/icon/main2.svg"
          } else {
            this.image1 = 'static/icon/main1.svg'
          }
          if (this.selected == 'activity') {
            this.$router.push('/activity')
            this.image2 = "static/icon/activity2.svg"
          } else {
            this.image2 = "static/icon/activity1.svg"
          }
          if (this.selected=='mine'){
            this.$router.push('/mine')
            this.image3="static/icon/mine2.svg"
          }else {
            this.image3="static/icon/mine1.svg"
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>
